<template>
  <div>
    <j-modal
      :title="title"
      :width="1200"
      :visible="visible"
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel">
      <a-spin :spinning="confirmLoading">
        <!-- 主表单区域 -->
        <a-form :form="form">
          <a-row>

            <a-col :xs="24" :sm="12">
              <a-form-item label="冷库名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['name', validatorRules.name]" placeholder="请输入冷库名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="冷库编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['code', validatorRules.code]" placeholder="请输入冷库编码"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="负责人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['person', validatorRules.person]" placeholder="请输入负责人"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="负责人编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['personcode', validatorRules.personcode]" placeholder="请输入负责人编码"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="状态 0正常1删除" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-decorator="['state']" placeholder="请输入状态 0正常1删除" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['createBy']" placeholder="请输入创建人"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="创建日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date placeholder="请选择创建日期" v-decorator="['createTime']" :trigger-change="true" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="更新人" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-decorator="['updateBy']" placeholder="请输入更新人"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12">
              <a-form-item label="更新日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <j-date placeholder="请选择更新日期" v-decorator="['updateTime']" :trigger-change="true" style="width: 100%"/>
              </a-form-item>
            </a-col>

          </a-row>
        </a-form>

        <!-- 子表单区域 -->
        <!--        <a-tabs v-model="activeKey" @change="handleChangeTabs">
                  <a-tab-pane tab="冷库关联人员" :key="refKeys[0]" :forceRender="true">
                    <j-editable-table
                      :ref="refKeys[0]"
                      :loading="flowerStorehouseDetailTable.loading"
                      :columns="flowerStorehouseDetailTable.columns"
                      :dataSource="flowerStorehouseDetailTable.dataSource"
                      :maxHeight="300"
                      :rowNumber="true"
                      :rowSelection="true"
                      :actionButton="true"/>
                  </a-tab-pane>

                </a-tabs>-->

        <div style='margin-top: -20px'>
          <div style='font-size: 20px;color: #0742f3;margin-bottom: 3px'>冷库关联人员</div>
          <div>
            <a-button type='primary' icon='plus' @click='openDialog'>新增</a-button>
          </div>
          <div style='margin-top: 7px'>
            <a-table :columns='userColumns' :data-source='userDataSource'
                     bordered row-key='superId'
                     :loading="userLoading">
              <template v-for="colNumber in ['number']" :slot='colNumber' slot-scope='text, record, index'>
                <div :key='colNumber' style='float: left;margin-right: 0'>
                  <input v-model:value='record.number' placeholder='请输入数量'
                         @change='numberChange(record,record.number,record.totalprice)' :disabled='disabled.number'/>
                </div>
              </template>
              <template v-for="colPrice in ['price']" :slot='colPrice' slot-scope='text, record, index'>
                <div :key='colPrice' style='float: left;margin-right: 0'>
                  <input v-model:value='record.price' disabled placeholder='请输入单价' disabled/>
                </div>
              </template>
              <template v-for="colTotalprice in ['totalprice']" :slot='colTotalprice' slot-scope='text, record, index'>
                <div :key='colTotalprice' style='float: left;margin-right: 0'>
                  <input v-model:value='record.totalprice' placeholder='请输入总价' :disabled='disabled.totalprice'
                         @change='numberChange(record,record.number,record.totalprice)'/>
                </div>
              </template>
              <template slot='operation' slot-scope='text, record'>
                <a-popconfirm v-if='userDataSource.length' title='确定删除?'
                              @confirm='() => userDelete(record.superId)'>
                  <a>删除</a>
                </a-popconfirm>
              </template>
            </a-table>
          </div>
        </div>
      </a-spin>
    </j-modal>

    <a-modal v-model:visible='userVisible' width='60%' title='产品选择' @ok='userAdd'>
      <div style="margin-bottom: 10px">
        <a-row style='margin-top: 10px'>
          <a-col :span='8'>
            <div style='display: inline-block;width: 45px;'>账号：</div>
            <div style='display: inline-block;width: 70%'>
              <a-input v-model='queryUserParams.personcode' placeholder='请输入账号' allow-clear @change="searchUser"/>
            </div>
          </a-col>
          <a-col :span='8'>
            <div style='display: inline-block;width: 80px;'>用户名：</div>
            <div style='display: inline-block;width: 70%'>
              <a-input v-model='queryUserParams.person' placeholder='请输入用户名' allow-clear @change="searchUser"/>
            </div>
          </a-col>
          <a-col :span='8'>
            <a-button type="primary" icon="search" @click="searchUser">
              查询
            </a-button>
          </a-col>
        </a-row>
      </div>
      <a-table :columns='selectUserColumns' :data-source='selectUserDataSource' bordered
               :loading='selectUserLoading'
               :row-selection="{selectedRowKeys: selectedRowKeys,type: 'radio',onChange:onUserSelectChange}"
               row-key='id'
               :pagination='userPagination'
               @change='userPaginationChange'
      ></a-table>
    </a-modal>
  </div>
</template>

<script>

import pick from 'lodash.pick'
import {FormTypes, getRefPromise} from '@/utils/JEditableTableUtil'
import {JEditableTableMixin} from '@/mixins/JEditableTableMixin'
import {validateDuplicateValue} from '@/utils/util'
import JDate from '@/components/jeecg/JDate'
import {getUserList} from '@/api/api'

export default {
  name: 'FlowerStorehouseModal',
  mixins: [JEditableTableMixin],
  components: {
    JDate,
  },
  data() {
    return {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      labelCol2: {
        xs: {span: 24},
        sm: {span: 3},
      },
      wrapperCol2: {
        xs: {span: 24},
        sm: {span: 20},
      },
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      validatorRules: {
        name: {
          rules: [
            {required: true, message: '请输入冷库名称!'},
          ]
        },
        code: {
          rules: [
            {required: true, message: '请输入冷库编码!'},
          ]
        },
        person: {
          rules: [
            {required: true, message: '请输入负责人!'},
          ]
        },
        personcode: {
          rules: [
            {required: true, message: '请输入负责人编码!'},
          ]
        },
      },
      refKeys: ['flowerStorehouseDetail',],
      tableKeys: ['flowerStorehouseDetail',],
      activeKey: 'flowerStorehouseDetail',
      // 冷库子表
      flowerStorehouseDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          /*{
            title: '主表id',
            key: 'mainid',
            type: FormTypes.input,
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },*/
          {
            title: '账号',
            key: 'personcode',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          {
            title: '用户名',
            key: 'person',
            type: FormTypes.input,
            width: "200px",
            placeholder: '请输入${title}',
            defaultValue: '',
          },
          /*{
            title: '人员id',
            key: 'personid',
            type: FormTypes.input,
            width:"200px",
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },*/
        ]
      },
      url: {
        add: "/flower/flowerStorehouse/add",
        edit: "/flower/flowerStorehouse/edit",
        flowerStorehouseDetail: {
          list: '/flower/flowerStorehouse/queryFlowerStorehouseDetailByMainId'
        },
      },
      userColumns: [
        {
          title: '账号',
          dataIndex: 'personcode',
        },
        {
          title: '用户名',
          dataIndex: 'person',
        },
      ],
      userList: [],
      userPagination: {//选择用户弹窗中表格的分页
        total: 0,
        current: 1,
        pageSize: 5,//每页中显示5条数据
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`  //分页中显示总的数据
      },
      selectUserLoading: false,
      selectUserColumns: [// 用户选择弹窗的表头
        {
          title: '账号',
          dataIndex: 'personcode'
        }, {
          title: '用户名',
          dataIndex: 'person'
        }
      ],
      selectUserDataSource: [],
      userVisible: false,//是否打开用户选择的弹窗
      queryUserParams: {// 用户选择弹窗的查询
        personcode: '',// 账号
        code: ''// 商品编码
      },
    }
  },
  mounted() {
    this.queryUserList()
  },
  methods: {
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** 调用完edit()方法之后会自动调用此方法 */
    editAfter() {
      let fieldval = pick(this.model, 'name', 'code', 'person', 'personcode', 'state', 'createBy', 'createTime', 'updateBy', 'updateTime')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldval)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = {id: this.model.id}
        this.requestSubTableData(this.url.flowerStorehouseDetail.list, params, this.flowerStorehouseDetailTable)
      }
    },
    /** 整理成formData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // 展开
        flowerStorehouseDetailList: allValues.tablesValue[0].values,
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    },
    popupCallback(row) {
      this.form.setFieldsValue(pick(row, 'name', 'code', 'person', 'personcode', 'state', 'createBy', 'createTime', 'updateBy', 'updateTime'))
    },
    queryUserList() {
      this.selectUserLoading = true
      let params = {
        pageNo: this.userPagination.current,
        pageSize: this.userPagination.pageSize
      }
      getUserList(params).then(res => {
        if (res.success) {
          this.userPagination.total = res.result.total
          this.userList = res.result.records

          this.userList.map(item => {//将userList中的各用户对象中封装进personcode（账号）和person（用户名）
            item.personcode = item.username
            item.person = item.realname
          })
          console.log('==', this.userList)
        } else {
          this.$message.error(res.message)
        }
        this.selectUserLoading = false
      })
    },
    searchUser() {// 用户选择弹窗中的搜索用户

    },
    onUserSelectChange(selectedRowKeys, selectionRows) {
    },
    userAdd() {// 选择用户弹窗中的确定选择用户

    },
    userPaginationChange(pagination) {
      this.userPagination.current = pagination.current
      this.userPagination.pageSize = pagination.pageSize
      this.queryUserList()
    },
    openDialog() {
      this.selectedRowKeys = []
      this.selectuser = {}
      this.queryUserList()
      this.userVisible = !this.userVisible
    }
  }
}
</script>

<style scoped>
</style>